<template>
    <div>
        <mj-title type="h2" title="Autocomplete 自动完成"></mj-title>
        <div class="page-desc">autocomplete 是一个可带输入建议的输入框组件</div>


        <mj-title type="h2" title="激活即列出输入建议"></mj-title>
        <div class="page-desc">根据输入内容提供对应的输入建议,在输入框聚焦时返回全部数据</div>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
				<div class="flex">
                    <div class="input" style="width:300px;"> 
                        <mj-autocomplete
                            v-model="value1" 
                            :trigger-on-focus="true"
                            :fetch-suggestions="querySuggestions"
                            transfer
                            transfer-class-name="select-zIndex"
                            @on-select="onClick">
                        </mj-autocomplete>
                    </div>
                    <div class="ml20">
                        <mj-button type="primary" @click="visible = true">弹出框</mj-button>
                    </div>
                </div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
	&lt;mj-autocomplete 
        v-model="value" 
        :trigger-on-focus="true" 
        :fetch-suggestions="querySuggestions" 
        @select="onClick"&gt;
	&lt;/mj-autocomplete>
&lt;/template>
&lt;script>
export default {
    data(){
        return:{
            value:'',
            restaurants:[]
        }
    },
    mounted() {
        this.restaurants = this.loadAll();
    },
	methods:{
		querySuggestions(queryString,cb){
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        createFilter(queryString) {
            return (restaurant) => {
                return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        onClick(item){
            console.log(item)
        },
        loadAll() {
            return [
                { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
                { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
                { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
                { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
                { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
                { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
                { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
                { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },
                { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
                { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
                { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
                { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
                { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },
                { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },
                { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },
                { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },
                { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },
                { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
                { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
                { "value": "枪会山", "address": "上海市普陀区棕榈路" },
                { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
                { "value": "钱记", "address": "上海市长宁区天山西路" },
                { "value": "壹杯加", "address": "上海市长宁区通协路" }
            ];
        },
	}
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h2" title="禁用当前组件"></mj-title>
        <div class="page-desc">禁用当前组件无法使用</div>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <div class="input">
                    <mj-form label-width="50px">
                        <mj-form-item label="禁用">
                            <mj-switch v-model="autoDisabled"></mj-switch>
                        </mj-form-item>
                    </mj-form>
                </div>
				<div class="input" style="width:300px;"> 
                    <mj-autocomplete
                        v-model="value"
                        :disabled="autoDisabled"
                        :trigger-on-focus="true"
                        :fetch-suggestions="querySuggestions"
                        transfer
                        transfer-class-name="select-zIndex"
                        @on-select="onClick">
                    </mj-autocomplete>
                </div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
&lt;div>
    &lt;div class="input">
        &lt;mj-form label-width="50px">
            &lt;mj-form-item label="禁用">
                &lt;mj-switch v-model="autoDisabled">&lt;/mj-switch>
            &lt;/mj-form-item>
        &lt;/mj-form>
    &lt;/div>
    &lt;mj-autocomplete 
        v-model="value"
        disabled
        :trigger-on-focus="true" 
        :fetch-suggestions="querySuggestions" 
        @select="onClick"&gt;
	&lt;/mj-autocomplete>
&lt;/div>
	
    
&lt;/template>
&lt;script>
export default {
    data(){
        return:{
            value:'',
            restaurants:[]
        }
    },
    mounted() {
        this.restaurants = this.loadAll();
    },
	methods:{
		querySuggestions(queryString,cb){
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        createFilter(queryString) {
            return (restaurant) => {
                return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        onClick(item){
            console.log(item)
        },
        loadAll() {
            return [
                { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
                { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
                { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
                { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
                { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
                { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
                { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
            ];
        },
	}
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>
        
        <mj-title type="h2" title="输入后列出输入建议"></mj-title>
        <div class="page-desc">在输入框输入一个完整字符时，返回相关数据</div>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
				<div class="input" style="width:300px;"> 
                    <mj-autocomplete
                        v-model="value" 
                        :trigger-on-focus="false"
                        :fetch-suggestions="querySuggestions"
                        @on-select="onClick">
                    </mj-autocomplete>
                </div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
	&lt;mj-autocomplete 
        v-model="value" 
        :trigger-on-focus="false" 
        :fetch-suggestions="querySuggestions" 
        @select="onClick"&gt;
	&lt;/mj-autocomplete>
&lt;/template>
&lt;script>
export default {
    data(){
        return:{
            value:'',
            restaurants:[]
        }
    },
    mounted() {
        this.restaurants = this.loadAll();
    },
	methods:{
		querySuggestions(queryString,cb){
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        createFilter(queryString) {
            return (restaurant) => {
                return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        onClick(item){
            console.log(item)
        },
        loadAll() {
            return [
                { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
                { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
                { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
                { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
                { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
                { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
                { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
                { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },
                { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
                { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
                { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
                { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
                { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },
                { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },
                { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },
                { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },
                { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },
                { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
                { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
                { "value": "枪会山", "address": "上海市普陀区棕榈路" },
                { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
                { "value": "钱记", "address": "上海市长宁区天山西路" },
                { "value": "壹杯加", "address": "上海市长宁区通协路" }
            ];
        },
	}
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <!-- 自定义输入建议相关 -->
        <mj-title type="h2" title="自定义输入建议的显示"></mj-title>
        <div class="page-desc">使用scoped slot自定义输入建议的模板。该 scope 的参数为item，表示当前输入建议对象。</div>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
				<div class="input" style="width:300px;"> 
                    <mj-autocomplete
                        v-model="value" 
                        :trigger-on-focus="true"
                        :fetch-suggestions="querySuggestions"
                        @on-select="onClick">
                        <template slot-scope="{ item }">
                            <div>{{item.value}}</div>
                            <div class="adr">{{item.address}}</div>
                        </template>
                    </mj-autocomplete>
                </div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
	&lt;mj-autocomplete 
        v-model="value" 
        :trigger-on-focus="true" 
        :fetch-suggestions="querySuggestions" 
        @select="onClick"&gt;
        &lt;template slot-scope="{item}"&gt;
            &lt;div>所需内容&lt;/div&gt;
            &lt;div class="adr">所需内容&lt;/div&gt;
        &lt;/template>
	&lt;/mj-autocomplete>
&lt;/template>
&lt;script>
export default {
    data(){
        return:{
            value:'',
            restaurants:[]
        }
    },
    mounted() {
        this.restaurants = this.loadAll();
    },
	methods:{
		querySuggestions(queryString,cb){
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        createFilter(queryString) {
            return (restaurant) => {
                return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        onClick(item){
            console.log(item)
        },
        loadAll() {
            return [
                { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
                { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
                { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
                { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
                { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
                { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
                { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
                { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },
                { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
                { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
                { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
                { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
                { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },
                { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },
                { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },
                { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },
                { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },
                { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
                { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
                { "value": "枪会山", "address": "上海市普陀区棕榈路" },
                { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
                { "value": "钱记", "address": "上海市长宁区天山西路" },
                { "value": "壹杯加", "address": "上海市长宁区通协路" }
            ];
        },
	}
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <!-- 接口显示相关 -->
        <mj-title type="h2" title="远程搜索"></mj-title>
        <div class="page-desc">从服务端搜索数据</div>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
				<div class="input" style="width:300px;"> 
                    <mj-autocomplete
                        v-model="value" 
                        :trigger-on-focus="true"
                        :fetch-suggestions="asyncQuerySuggestions"
                        @on-select="onClick">
                    </mj-autocomplete>
                </div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
	&lt;mj-autocomplete 
        v-model="value" 
        :trigger-on-focus="true" 
        :fetch-suggestions="asyncQuerySuggestions" 
        @select="onClick"&gt;
	&lt;/mj-autocomplete>
&lt;/template>
&lt;script>
export default {
    data(){
        return:{
            value:'',
            restaurants:[]
        }
    },
    mounted() {
        this.restaurants = this.loadAll();
    },
	methods:{
		asyncQuerySuggestions(queryString,cb){
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 模拟延时返回
            clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                cb(results);
            }, 3000 * Math.random());
        },
        createFilter(queryString) {
            return (restaurant) => {
                return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        onClick(item){
            console.log(item)
        },
        loadAll() {
            return [
                { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
                { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
                { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
                { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
                { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
                { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
                { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
                { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },
                { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
                { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
                { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
                { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
                { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },
                { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },
                { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },
                { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },
                { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },
                { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
                { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
                { "value": "枪会山", "address": "上海市普陀区棕榈路" },
                { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
                { "value": "钱记", "address": "上海市长宁区天山西路" },
                { "value": "壹杯加", "address": "上海市长宁区通协路" }
            ];
        },
	}
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-dialog
        title="嵌套测试弹出框"
        v-model="visible"
        :width="600"
        :close-modal="false"
        confirm="确认"
        cancel="取消">
        <mj-form ref="ruleForm" v-model="ruleForm">
            <mj-form-item label="测试选项:" prop="status">
                <mj-autocomplete
                        v-model="ruleForm.value"
                        :trigger-on-focus="true"
                        :fetch-suggestions="querySuggestions"
                        transfer
                        transfer-class-name="select-zIndex">
                    </mj-autocomplete>
            </mj-form-item>
        </mj-form>
    </mj-dialog>

        <!-- api相关信息 -->
        <mj-title type="h5" title="API"></mj-title>
        <mj-title type="h6" title="Autocomplete 参数"></mj-title>
        <table class="api-table">

            <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
            	<tr>
            		<td>value/v-model</td>
            		<td>必填值，输入绑定值</td>
            		<td>String</td>
            		<td>-</td>
            	</tr>
            	<tr>
            		<td>placeholder</td>
            		<td>输入框占位文本</td>
            		<td>String</td>
            		<td>请输入内容</td>
            	</tr>
            	<tr>
            		<td>clear-icon</td>
            		<td>是否显示清空图标</td>
            		<td>Boolean</td>
            		<td>false</td>
            	</tr>
            	<tr>
            		<td>value-key</td>
            		<td>输入建议对象中用于显示的键名</td>
            		<td>String</td>
            		<td>value</td>
            	</tr>
                <tr>
            		<td>transfer</td>
            		<td>是否将弹层放置于 body 内</td>
            		<td>Boolean</td>
            		<td>false</td>
            	</tr>
            	<tr>
            		<td>fetch-suggestions</td>
            		<td>返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它</td>
            		<td>Function(queryString, callback)</td>
            		<td>-</td>
            	</tr>
            	<tr>
            		<td>trigger-on-focus</td>
            		<td>是否在输入框 focus 时显示建议列表</td>
            		<td>Boolean</td>
            		<td>false</td>
            	</tr>
                <tr>
            		<td>hide-loading</td>
            		<td>是否隐藏远程加载时的加载提示</td>
            		<td>Boolean</td>
            		<td>false</td>
            	</tr>
                <tr>
            		<td>disabled</td>
            		<td>是否禁用</td>
            		<td>Boolean</td>
            		<td>false</td>
            	</tr>
            </tbody>
        </table>

		<mj-title type="h6" title="Autocomplete 事件"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>事件名</th>
					<th>说明</th>
					<th>回调</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>on-select</td>
					<td>点击选中建议项时触发</td>
					<td>选中建议项</td>
				</tr>
                <tr>
					<td>on-focus</td>
					<td>聚焦时触发</td>
					<td>event</td>
				</tr>
                <tr>
					<td>on-clear</td>
					<td>清空时触发	</td>
					<td>-</td>
				</tr>
			</tbody>
		</table>

        <mj-title type="h6" title="Autocomplete 自定义模板"></mj-title>
		<table class="api-table">
			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>-</td>
					<td>自定义输入建议，参数为 { item }</td>
				</tr>
			</tbody>
		</table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value:'',
            value1: '',
            restaurants:[],
            placeholder:'请输入关键字',
            timeout:null,
            visible: false,
            autoDisabled: true,
            ruleForm: {
                value:''
            }
        }
    },
    mounted() {
        this.restaurants = this.loadAll();
        setTimeout(() => {
            this.value1 = '新'
        }, 2000);
    },
    methods: {
        querySuggestions(queryString,cb){
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            cb(results);
        },
        createFilter(queryString) {
            return (restaurant) => {
                return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        asyncQuerySuggestions(queryString,cb){
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 模拟延时返回
            clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                cb(results);
            }, 3000 * Math.random());
        },
        onClick(item){
            console.log(item)
        },
        loadAll() {
            return [
            { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号",disabled: true },
            { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
            { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
            { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
            { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
            { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
            { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
            { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },
            { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
            { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
            { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
            { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
            { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },
            { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },
            { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },
            { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },
            { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },
            { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
            { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
            { "value": "枪会山", "address": "上海市普陀区棕榈路" },
            { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
            { "value": "钱记", "address": "上海市长宁区天山西路" },
            { "value": "壹杯加", "address": "上海市长宁区通协路" }
            ];
        },
    },
}
</script>
<style>
    .adr{
        font-size: 12px;
        color: #b4b4b4;
        line-height: 20px;
    }
    .select-zIndex{
        z-index: 3000;
    }
</style>